<template>
  <div>
    <div class="header">
      <div class="header-item">
        管理员名称：
        <el-input
          style="width: 180px"
          size="small"
          clearable
          v-model="search.staffName"
          placeholder="请输入管理员名称"
        />
      </div>
      <div class="header-item">
        <el-button
          @click="searchData"
          size="small"
          type="primary"
        >
          搜索
        </el-button>
      </div>
      <div
        class="header-item"
        style="float: right"
      >
        <el-button
          size="small"
          icon="el-icon-plus"
          type="success"
          @click="staffShow = true;selectUserId =0"
        >
          添加管理员
        </el-button>
      </div>
    </div>
    <el-table
      :data="items"
      size="medium"
      @row-dblclick="dbClick"
      :height="parseInt($store.state.pageHeight)-350"
    >
      <el-table-column
        prop="no"
        align="center"
        label="管理员编码"
      />
      <el-table-column
        prop="userName"
        align="center"
        label="管理员名称"
      />
      <el-table-column
        prop="phone"
        align="center"
        label="管理员电话"
      />
      <el-table-column
        prop="describeText"
        align="center"
        label="描述"
      />
      <el-table-column
        prop="userName"
        align="center"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.userName!=='superAdmin'"
            size="mini"
            type="primary"
            @click="selectUserId = scope.row.id;staffShow = true"
          >
            编辑
          </el-button>
          <el-button
            v-if="scope.row.userName!=='superAdmin'"
            size="mini"
            type="danger"
            @click="selectUserId = scope.row.id;changePasswordShow = true"
          >
            修改密码
          </el-button>
          <el-button
            v-if="scope.row.userName!=='superAdmin'"
            size="mini"
            type="warning"
            @click="action(scope.row,scope.$index)"
          >
            绑定角色
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <FooterPage
      :page-size="pre_page"
      :total-page="total_count"
      :current-page="page"
      @pageChange="pageChange"
      @sizeChange="sizeChange"
    />
    <SelectRoleList
      :show="selectRole.show"
      :roles="selectRole.roles"
      @cancel="selectRole.show = false"
      @select="selectRoleAction"
    />
    <!--    添加编辑管理员-->
    <AddStaff
      v-if="staffShow"
      :show="staffShow"
      :user-id="selectUserId"
      @close="staffShow=false"
      @success="staffShow=false;getItems()"
    />
    <changePassword
      :user-id="selectUserId"
      @close="changePasswordShow=false"
      v-if="changePasswordShow"
      :show="changePasswordShow"
    />
  </div>
</template>
<script>
  import FooterPage from '@/component/common/FooterPage'
  import SelectRoleList from '@/component/base/SelectRoleList'
  import AddStaff from './AddStaff'
  import changePassword from './ChangePassword'

  export default {
    name: 'StaffList',
    components: {
      AddStaff,
      changePassword,
      FooterPage,
      SelectRoleList
    },
    data () {
      return {
        changePasswordShow: false,
        staffShow: false,
        selectUserId: 0,
        selectRole: {
          show: false,
          index: -1,
          roles: []
        },
        search: {
          staffName: ''
        },
        types: [],
        items: []
      }
    },
    created () {
      this.getItems()
    },
    methods: {
      async selectRoleAction (result) {
        const rids = result.map(item => item.id)
        const { id } = this.items[this.selectRole.index]
        const params = { rids }
        await this.$service.gzl.roldBind(id, params)
        this.$message.success('授予成功')
        this.selectRole.show = false
      },
      async action ({ id }, index) {
        const { data } = await this.$service.gzl.getUserRoles(id)
        this.selectRole.roles = data.data ? data.data.map(item => item.rid) : []
        this.selectRole.index = index
        this.selectRole.show = true
      },
      dbClick (row) {
        // this.$router.push(`/base/role/edit/${row.id}`)
      },
      searchData () {
        this.page = 1
        this.getItems()
      },
      async getItems () {
        const params = {
          page: this.page,
          pageSize: this.pre_page,
          userName: this.search.staffName
        }
        const { data } = await this.$service.gzl.userList(params)
        this.items = data.data.records
        this.total_count = data.data.total
      },
      pageChange (page) {
        this.page = page
        this.getItems()
      },
      sizeChange (size) {
        this.pre_page = size
        this.getItems()
      }
    }
  }
</script>

<style scoped>
  .header {
    padding: 10px;
    font-size: 14px;
    border-bottom: 1px solid #eee;
  }

  .header-item {
    display: inline-block;
    margin-right: 10px;
  }
</style>
